<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物送养</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fde8e8;
            /* 淡粉色背景 */
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            /* 居中对齐标题内容 */
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            /* Ensure header stays above other content */
        }

        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            text-align: center;
            /* 居中对齐导航链接 */
        }

        header nav ul li {
            display: inline;
            margin-right: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            /* 导航链接的内边距 */
            border-radius: 5px;
            /* 圆角 */
            transition: background-color 0.3s ease;
            /* 背景颜色平滑过渡 */
        }

        header nav ul li a:hover {
            background-color: #fcc;
            /* 鼠标悬停时的浅粉色背景 */
        }

        h1,
        h2 {
            text-align: center;
            color: #333;
            margin-top: 80px;
            /* Ensure content starts below fixed header */
        }

        .pet-list {
            margin-top: 130px;
            /* Adjust margin to create space below fixed header */
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fff;
            /* 白色背景 */
        }

        .add-pet {
            margin-top: 80px;
            /* Adjust margin to create space below fixed header */
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-image: url('../static/images/bj1.jpg');
            /* 背景图片 */
        }

        .add-pet,
        .pet-list {
            width: 90%;
            margin: 0 auto;
            /* Centers the sections horizontally */
        }


        form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            margin-bottom: 10px;
        }

        input,
        button {
            padding: 8px;
            margin-bottom: 10px;
            width: 200px;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .pet-list li {
            padding: 10px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 5px;
        }

        .pet-list li:last-child {
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">系统首页</a></li>
                <li><a href="/kind">宠物种类知识</a></li>
                <li><a href="/adopt">领养宠物页面</a></li>
                <li><a href="/Adoption">送养宠物页面</a></li>
                <li><a href="/Blogger">宠物博客交流中心</a></li>
                <li><a href="/PersonalCenter">个人中心</a></li>
            </ul>
        </nav>
    </header>

    <h1>宠物送养中心</h1>

    <section class="add-pet">
        <h2>添加新宠物</h2>
        <form id="petForm">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required><br><br>

            <label for="species">种类：</label>
            <input type="text" id="species" name="species" required><br><br>

            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" required><br><br>

            <label for="reason">送养原因：</label>
            <input type="text" id="reason" name="reason" required><br><br>

            <label for="requirements">领养要求：</label>
            <input type="text" id="requirements" name="requirements" required><br><br>

            <button type="submit">添加宠物</button>
        </form>
    </section>

    <section class="pet-list">
        <h2>可领养宠物</h2>
        <ul id="petList">
            <!-- 动态添加宠物信息 -->
        </ul>
    </section>

    <script>
        // JavaScript for navigation redirection
        document.addEventListener("DOMContentLoaded", function () {
            var links = document.querySelectorAll("header nav ul li a");
            links.forEach(function (link) {
                link.addEventListener("click", function (event) {
                    event.preventDefault();
                    var targetPage = this.getAttribute("href");
                    window.location.href = targetPage;
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const petForm = document.getElementById('petForm');
            const petList = document.getElementById('petList');

            petForm.addEventListener('submit', function (event) {
                event.preventDefault();

                // 获取表单值
                const name = this.querySelector('#name').value;
                const species = this.querySelector('#species').value;
                const age = this.querySelector('#age').value;
                const reason = this.querySelector('#reason').value;
                const requirements = this.querySelector('#requirements').value;

                // 创建新的列表项
                const li = document.createElement('li');
                li.innerHTML = `
                <strong>${name}</strong> (${species}), Age: ${age}, Reason: ${reason}, Requirements: ${requirements}
                <button class="delete-btn">删除</button>
            `;
                petList.appendChild(li);

                // 清空表单输入
                this.reset();
            });

            // 删除按钮的事件委托
            petList.addEventListener('click', function (event) {
                if (event.target.classList.contains('delete-btn')) {
                    event.target.parentElement.remove();
                }
            });
        });
    </script>

</body>

</html>